<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../css/lcs-font.css"/>
		<!--
        	作者：592176224@qq.com
        	时间：2019-05-09
        	描述：
		<link rel="stylesheet" type="text/css" href="../css/lcs-mui-numbox.css"/>
        -->
		<style type="text/css">
			.content{
				width: 100%;
				background-color: #F2F2F2;
				padding: 10px;
			}
			.search{
				display: flex;
				justify-content: center;
				align-content: center;
				padding: 10px;
				background-color: white;
			}
			.simg{
				width: 30px;
				height: 30px;
			}
			.simg>img{
				width: 100%;
				height: 100%;
			}
			.ssdiv{
				width: 75%;
			}
			.ssinp{
				width: 100%;
				height: 100%;
				border: 0;
				padding-left: 20px;
			}
			
			.context{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				height: calc(100% - 70px);
			}
			.tleft{
				width: 25%;
			}
			.tright{
				width: 75%;
				
				height: 100%
			}
			.tmain{
				width: 100%;
				height: 100%;
			}
			.tleft>div{
				width: 100%;
				height: 2.5em;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.bgw{
				background-color: white;
			}
			.goodsdiv{
				width: 100%;
				padding: 0.2em;
				height: auto;
				border-bottom: 1px solid #ACACB4;
			}
			
			.topdiv{
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 5px;
			}
			.botdiv{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				
			}
			.toptext{
				width: 60%;
				display: flex;
				align-items: flex-start;
				justify-content: center;
				flex-direction: column;
				padding-left: 0.5em;
			}
			.topimg{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 25%;
				height: auto;
			}
			.topimg>img{
				width: 100%;
				border-radius: 50%;
			}
			.qian{
				width: 50%;
			}
			.textdiv{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			
			
			.mdata{
				width: 100%;
				background-color: white;
				padding: 0.5em;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-bottom: 0.3em;
			}
			.mimg{
				margin: 0.5em;
			}
			.mimg>img{
				width: 70px;
				height: 70px;
			}
			.mtext{
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-direction: column;
			}
			.context{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				height: calc(100% - 70px);
			}
			.tleft{
				width: 25%;
			}
			.tright{
				width: 75%;
				height: 100%
			}
			.tmain{
				width: 100%;
				height: 100%;
			}
			.tleft>div{
				width: 100%;
				height: 2.5em;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.fimg{
				position: relative;
			}
			.nummark{
				position: absolute;
				width: 15px;
				height: 15px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: red;
				color: white;
				border-radius: 50%;
				top: 0;
				right: 0;
				padding: 2px;
				font-size: 12px;
			}
			.footgd{
    			height: 4em;
			}
		</style>
	</head>



	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">收银记账</h1>
		</header>
		<div  id="refreshContainer" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
			<div class="mdata hidden" id="memberid">
		    	
		    </div>
		    <div class="content">
		    	<div class="search">
		    		<div class="simg">
		    			<img src="../img/ss-img2.png"/>
		    		</div>
		    		<div class="ssdiv">
		    			<form action="" onkeydown="if(event.keyCode==13)return false;">
							<input id="card_number" class="ssinp" placeholder="请输入编码/名称" />
						</form>
		    		</div>
		    		<div class="simg">
		    			<img id="goscann" src="../img/saomiao.png"/>
		    		</div>
		    	</div>
		    </div>
		    <div class="context">
		    	<div class="tleft fe09" id="selectdiv">
		    		<!--
                    	作者：592176224@qq.com
                    	时间：2019-01-14
                    	描述：
		    		<div class="bgw"  href="#" id="1">
		    			所有商品
		    		</div>
		    		<div class="" href="#" id="1">
		    			1个商品
		    		</div>
		    		<div class="" id="2" href="#">
		    			2个商品
		    		</div>
                    -->
		    	</div>
		    	<div class="tright bgw">
		    		<div class="tmain" id="tmain">
		    			
		    			<!--
                        	作者：592176224@qq.com
                        	时间：2018-12-28
                        	描述：
                      
                        <div class="goodsdiv">
		    				<div class="topdiv">
		    					<div class="topimg">
		    						<img src="../images/books_bg.png"/>
		    					</div>
		    					<div class="toptext">
		    						<div id="">
		    							maimaimai
		    						</div>
		    						<div class="">
		    							库存：100
		    						</div>
		    					</div>
		    				</div>
		    				<div class="botdiv">
		    					<div class="qian">
		    						￥100.00
		    					</div>
		    					<div class="">
		    						<div class="mui-numbox" data-numbox-step='1' data-numbox-min='0' data-numbox-max='10'>
		    						    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
		    						    <input class="mui-input-numbox" type="number" />
		    						    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
		    						</div>
		    					</div>
		    				</div>
		    			</div>
		    			  -->	
		    		</div>
		    		<div class="morediv hidden" id="moreid">
				   		<span id="more_list">更多</span>
				   	</div>
				   	<div class="footgd"></div>
		    	</div>
		    	
		    </div>
		    
		   
		    
		  
		    
		</div>
		
		<div class="footdiv">
		    	<div class="fleft" id="leftdiv">
		    		<div class="fimg">
		    			<img src="../img/gwc.png"/>
		    			<div class="nummark">
		    				0
		    			</div>
		    		</div>
		    		<div class="" id="moneyid">
		    			￥00.00
		    		</div>
		    	</div>
		    	<div class="fright" id="subut">
		    		结账
		    	</div>
		    </div>
		</div>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var cas = null;
			(function(){
				var cashier = function(){};
				$.extend(cashier.prototype, {
					goodslist:[],
					sort_id:0,		//商品分类id
					pagenums:1,		//分页
					tarnum:0,		//选择分类
					glist:[],		//购物车 数组
					flag:false,		//是否上拉
					mid:0,			//会员id
					member_discount:100,	//会员折扣
					plist:[],
					onReady:function(){
						var that = this;
						//初始化 + 上拉下拉
						mui.init({
							 pullRefresh: {
						        container: '#refreshContainer',
						        down: {
						        	height:50,//可选,默认50.触发下拉刷新拖动距离,
							        auto: false,//可选,默认false.首次加载自动下拉刷新一次
							        contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
							        contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
							        contentrefresh : "正在刷新...",
						            callback: pulldownRefresh
						        },
						        up:{
						        	callback: pullupRefresh
						        }
						    }
						});
						function pullupRefresh(){
							that.more_list();
							mui('#refreshContainer').pullRefresh().endPullupToRefresh();
						}
						function pulldownRefresh(){
							that.pagenums = 1;
				      		that.plist = [];
				      		that.getsortlist();
							mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
							mui('#refreshContainer').pullRefresh().refresh(true);
						}
						/*
						 * /*{
						  pullRefresh : {
						    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
						    down : {
						    	 style:"circle",	
						      height:100,//可选,默认50.触发下拉刷新拖动距离,
//						      auto: false,//可选,默认false.首次加载自动下拉刷新一次
//						      contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
//						      contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
//						      contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
						      callback :function (){
						      		console.log("下拉")
						      		that.pagenums = 1;
						      		that.plist = [];
						      		that.getsortlist();
						      		mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
						      		mui('#refreshContainer').pullRefresh().refresh(true);
						      		that.flag = true;
						      }
						    },
						  }
						}*/
						 
						
						//设置监听函数
						
						that.mid = getrequest().mid||0;
						if(that.mid > 0){
							that.getmemberdetail();
							
						}else{
							that.setfunction();
						}
						
						//更多
						g("more_list").addEventListener("tap",function(){
							that.more_list();
						})
						
					},
					more_list:function(){
						var that = this;
						that.pagenums++;
						that.getsortlist();
					},
					//获取会员详情
					getmemberdetail:function(){
						var that = this;
						var data = {
								url:"/api/member/detail",
								data:{
									access_token:acctoken(),
									id:that.mid,
								}
							}
							ajax(data,function(res){
								console.log("会员详情",res);
								that.setmamber(res.data);
								that.setfunction();
							})
						
					},
					//设置会员信息
					setmamber:function(data){
						var that = this;
						var memberid = g("memberid");
						if(null != data.member_level){
							that.member_discount = data.member_level.member_discount||100;
						}
						memberid.classList.remove("hidden");
						var str = '<div class="mimg">';
						if(data.images&&data.images.path_name){
		    				str += '<img class="border50" src="'+data.images.path_name+'"/>';
			    		}else{
			    			str += '<img class="border50" src="../img/member-header.png"/>';
			    		}
		    			str += '</div><div class="mtext"><span id="">'+
		    			data.username+
		    			'</span><span class="fe08">卡号：'+
		    			data.card_number+
		    			'</span><span class="fe08">';
		    			if(null != data.member_level){
		    				str += data.member_level.member_level;
		    			}
		    			str += '<span style="padding-left: 1em;">积分：'+
		    			data.stay_score+
		    			'</span></span></div>';
		    			memberid.innerHTML = str;
					},
					setfunction:function(){
						var that = this;
						//选择分类
						$('#selectdiv').on('tap', 'div', function(e) {
		                	var targettab = this.getAttribute('id');
		               	 	console.log(targettab);
			                that.tarnum = targettab;
			                var targetclass = this.getAttribute('class');
				                if(targetclass == ""&&targettab != "addproduct"){
				                	$(this).addClass('bgw').siblings().removeClass('bgw');
				                	that.pagenums = 1;
				                	that.plist = [];
				                	that.getsortlist();
				                	mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
	                				mui('#refreshContainer').pullRefresh().refresh(true);
				                }else{
				                	
				                }
		           	 	});
		           	 	//扫码
		           	 	g("goscann").addEventListener("tap",function(e){
							var list = {
		                         pageid:"cashier",
		                         returnfun:"setcard_number"
		            		}
		                    mui.openWindow({
		                        url: '../general/scanning-page.html',
		                        id: 'scanning-page',
		                        extras: list,
		                        show: {
		                            aniShow: 'zoom-fade-in',
		                            duration: 300
		                        },
		                        waiting: {
		                            autoShow: true
		                        }
		                });
							
						})
		           	 	//结账提交
						$('#subut').on('tap',function(e) {
							if(that.glist.length){
								var list = {goods:that.glist,mid:that.mid};
								mui.openWindow({
				                	url:'cashier/shopping-cart.html',
				                	id:'shopping-cart',
				                	extras: list,
				                })
							}else{
								mui.toast("请选择商品");
							}
		           	 	});
						that.getproduct();
						that.getsortlist();
					},
					
					//商品数据
					getsortlist:function(){
						var that = this;
							var data = {
								url:"/api/product/list_sort",
								data:{
									access_token:acctoken(),
									sort_id:that.tarnum||0,
									key:g("card_number").value||"",
									page:that.pagenums
								}
							}
							ajax(data,function(res){
								console.log("商品数据",res);
								let list = res.data.data;
									if(list.length > 0){
										list.forEach(function(item,index){
											that.plist.push(item);
										})
										that.plist = remove_duplicate(that.plist);
										that.setsortlist(that.plist);
										$("#moreid").removeClass("hidden");
										if(list.length < res.data.per_page){
											$("#moreid").addClass("hidden");
										}
									}else{
										if(that.pagenums == 1){
											var str = '<div class="nolistdiv">暂无记录<div>';
											g("tmain").innerHTML = str;
											$("#moreid").addClass("hidden");
										}else{
											mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
											mui('#refreshContainer').pullRefresh().refresh(false);
											that.pagenums--
											$("#moreid").addClass("hidden");
											mui.toast('没有更多数据了');
										}
									}
							})
					},
					//设置商品 接口调用 和 子页面修改购物车调用
					setsortlist:function(data){
						var that = this;
						var glist = that.glist;
						var str = "";
						console.log(data);
						for(var i = 0; i < data.length; i++){
				    		str += '<div class="goodsdiv"><div class="topdiv"><div class="topimg">';
				    		if(data[i].product_images&&data[i].product_images.path_name){
								str += '<img src="'+data[i].product_images.path_name+'"/>'
							}else{
								str += '<img src="../img/noimg.png"/>';
							}
		    				str += '</div><div class="toptext"><div class="textdiv"><span class="fe09">'+
			    			data[i].product_name +
			    			'</span>';
			    			if(that.mid > 0){
			    				str += '<span class="fe05">会员价：￥'+
			    				((that.member_discount/100)*data[i].member_price).toFixed(2);
			    			}else{
			    				str += '<span class="fe05">零售价：￥'+data[i].retail_price;
			    			}
			    			str += '</span></div><div class="textdiv"><span class="fe05">库存：'+
			    			data[i].stock +
			    			'</span></div><div class="textdiv"><span class="fe05">积分：'+
			    			data[i].convert_point +
			    			'</span></div><div class="">'+
		    				'<div class="mui-numbox" data-numbox-step="1" data-numbox-min="0" data-numbox-max="100">'+
					        '<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>'+
					        '<input class="mui-input-numbox" id="num'+ data[i].id +'" type="number" value="';
					        if(glist.length){
					        	glist.forEach(function(item,index){
					        		if(item.id == data[i].id){
					        			str += item.product_number;
					        		}
					        	})
					        }
					        str += '"/>'+
					        '<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>'+
			    			'</div></div></div><span>';
			    			if(data[i].product_type == 2 ){
			    				str += "服务";
			    			}else{
			    				str += "商品";
			    			}
			    			str += '</span></div></div>';
						}
					
						g("tmain").innerHTML = str;
						mui('.mui-numbox').numbox();
						//mui('.mui-scroll-wrapper').scroll();
						for(var j = 0; j < data.length; j++){
							that.addpropertychange(data[j]);
						}
						
						that.setmoneyid();
					},
					//设置 数量改变监听 
					addpropertychange:function(list){
						var that = this;
						$("#num"+list.id).on("change input propertychange",function(){
									var product_price = 0;
									if(that.mid > 0){
										product_price = parseFloat(that.member_discount/100*list.member_price).toFixed(2);
									}else{
										product_price = list.retail_price;
									}
				    				if(this.value>0){
				    					var list2 = {
				    						id:list.id,
				    						product_id:list.id,
				    						product_type:list.product_type,
				    						product_number:this.value,
				    						product_name:list.product_name,
				    						member_price:list.member_price,
				    						product_price:product_price,
				    						images:list.product_images,
				    						sort:list.sort,
				    						product_type:list.product_type,
				    						is_appoint:2,
				    						employee:[]
				    					}
				    					that.addgwc(list2);
				    				}else{
				    					that.delgwc(list.id);
				    				}
						})
					},
					//删除商品
					delgwc:function(id){
						var that = this;
						var list = that.glist;
						console.log(list);
						for(var i = 0; i < list.length; i++){
							console.log(list[i].product_id == id);
							if(list[i].product_id == id){
								list.splice(i,1);
							}
						}
						that.glist = list;
						that.setmoneyid();
					},
					
					//添加商品
					addgwc:function(list){
						var that = this;
						var glist = that.glist;
						if(glist.length > 0){
							for(var i = 0 ; i < glist.length; i++){
								if(glist[i].product_id == list.product_id){
									glist[i].product_number = list.product_number;
									break;
								}else{
									for(var j = 0; j < glist.length; j++){
										var flag = true;
										if(glist[j].product_id == list.product_id){
											flag == false;
											break;
										}
										if(flag && j == glist.length-1){
											glist.push(list);
										}
									}
								}
							}
						}else{
							glist.push(list);
						}
						console.log(glist);
						that.glist = glist;
						that.setmoneyid();
					},
					
					//设置应付金额
					setmoneyid:function(){
						var that = this;
						var money = 0;
						var glist = that.glist;
						glist.forEach(function(item,index){
							if(that.mid > 0){
								var gnumber = parseInt(item.product_number);
								var price = parseFloat(that.member_discount/100*item.member_price).toFixed(2);
								money += (gnumber*price);
							}else{
								money += (parseInt(item.product_number)*parseFloat(item.product_price));
							}
						})
						
		    			g("leftdiv").innerHTML = '<div class="fimg">'+
									    			'<img src="../img/gwc.png"/>'+
									    			'<div class="nummark">'+
									    				glist.length+
									    			'</div>'+
									    		'</div>'+
									    		'<div class="" id="moneyid">￥'+
									    			parseFloat(money).toFixed(2)+
									    		'</div>';
						//g("moneyid").innerHTML = "￥"+
					},
					
					//商品分类
					getproduct:function(){
						var that = this;
						var data = {url:"/api/product_sort/lst",data:{access_token:acctoken()}}
						ajax(data,function(res){
							//console.log("获取商品类型",res)
							var str = '<div class="bgw" id="0">所有商品</div>';
							for(var i = 0; i < res.data.length; i++){
								str += '<div class="" id="'+res.data[i].id+'" onclick="">'+
						    			res.data[i].name+
						    			'</div>';
							}
							g("selectdiv").innerHTML = str;
							that.glist = [];
						});
					},
					
					//添加分类
					addproduct:function(value){
						var that = this;
						var data = {
							url :"/api/product_sort/add",
							data:{
								access_token:acctoken(),
								name:value
							}
						}
						ajax(data,function(res){
							console.log("add",res);
							mui.toast(res.msg);
							that.getproduct();
						})
					},
					//调用清空购物车
					cleargoods:function(){
						var that = this;
						that.goods = [];
						that.getsortlist();
					}
				});
				
				cas = new cashier();
				cas.onReady();
				
				document.onkeydown = function(event) {
					var e = event || window.event || arguments.callee.caller.arguments[0];
					if(e && e.keyCode == 13) {
						cas.pagenums = 1;
				      	cas.plist = [];
						cas.getsortlist();
					}
				}
				
			})()
			
			//扫码页面调用
			function setcard_number(scan){
				console.log("回调")
				g("card_number").value = scan;
				cas.pagenums = 1;
				cas.plist = [];
				cas.getsortlist();
				
			}
			function cleargoods2(){ 
				cas.cleargoods();
			}
			
			//设置购物车
			function setglist(list){
				console.log("设置购物车");
				cas.glist = JSON.parse(list);
				//cas.getsortlist();
				cas.setsortlist(cas.goodslist);
			}
			
		</script>
	</body>

</html>